<template>
  <el-dialog 
    title="申请详情" 
    :visible.sync="open" 
    width="800px" 
    append-to-body
    :close-on-click-modal="false"
  >
    <div v-loading="loading">
      <!-- 志愿优先级说明 - 新增 -->
      <el-alert
        v-if="application"
        :type="application.priority === 1 ? 'error' : 'warning'"
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <template slot="title">
          <span v-if="application.priority === 1">
            <i class="el-icon-star-on"></i>
            <strong>第一志愿</strong> - 该学生将您作为首选导师，优先考虑您的方向
          </span>
          <span v-else>
            <i class="el-icon-star-off"></i>
            <strong>第二志愿</strong> - 该学生也很认可您的研究方向
          </span>
        </template>
        <div style="margin-top: 8px; font-size: 13px;">
          <span v-if="application.priority === 1">
            💡 提示：第一志愿学生通常对您的方向有较强意向，建议优先考虑
          </span>
          <span v-else>
            💡 提示：志愿仅代表学生意愿，您可根据学生综合情况自主决定是否录取
          </span>
        </div>
      </el-alert>

      <!-- 学生详细信息 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">👤 学生信息</span>
        </div>
        <el-descriptions :column="2" border v-if="application">
          <el-descriptions-item label="学生姓名">
            <span class="student-name">{{ application.studentName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="学号">
            {{ application.studentNo }}
          </el-descriptions-item>
          <el-descriptions-item label="年级">
            {{ application.grade || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ application.major }}
          </el-descriptions-item>
          <el-descriptions-item label="班级">
            {{ application.className }}
          </el-descriptions-item>
          <el-descriptions-item label="绩点">
            <el-tag :type="getGpaType(application.gpa)" size="small">
              {{ application.gpa || '-' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系邮箱" :span="2">
            <span v-if="application.email" class="email-text">
              <i class="el-icon-message"></i>
              {{ application.email }}
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="技术栈" :span="2" v-if="application.techStack">
            <el-tag
              v-for="(tech, index) in parseTechStack(application.techStack)"
              :key="index"
              size="small"
              type="info"
              style="margin-right: 5px; margin-bottom: 5px;"
            >{{ tech }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="个人简介" :span="2" v-if="application.personalIntro">
            <div class="intro-text">{{ application.personalIntro }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 申请详情 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">📄 申请详情</span>
        </div>
        <el-descriptions :column="2" border v-if="application">
          <el-descriptions-item label="题目名称" :span="2">
            {{ application.topicTitle }}
          </el-descriptions-item>
          <el-descriptions-item label="志愿优先级">
            <el-tag :type="application.priority === 1 ? 'danger' : 'warning'" size="small">
              <i :class="application.priority === 1 ? 'el-icon-star-on' : 'el-icon-star-off'"></i>
              {{ application.priority === 1 ? '第一志愿' : '第二志愿' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请状态">
            <el-tag :type="getStatusType(application.status)" size="small">
              {{ application.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请理由" :span="2">
            <div class="apply-reason-text">{{ application.applyReason || '无' }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间" :span="2">
            {{ application.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间" v-if="application.reviewTime">
            {{ application.reviewTime }}
          </el-descriptions-item>
          <el-descriptions-item label="审核人" v-if="application.reviewBy">
            {{ application.reviewBy }}
          </el-descriptions-item>
          <el-descriptions-item label="审核意见" :span="2" v-if="application.reviewReason">
            <span :style="{color: application.status === '已拒绝' ? '#F56C6C' : '#67C23A'}">
              {{ application.reviewReason }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="open = false">关 闭</el-button>
      <el-button
        v-if="application && application.status === '待审核'"
        type="success"
        @click="handleAccept"
      >录 取</el-button>
      <el-button
        v-if="application && application.status === '待审核'"
        type="danger"
        @click="handleReject"
      >拒 绝</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getApplicationDetail } from "@/api/system/application";

export default {
  name: "ApplicationDetail",
  data() {
    return {
      // 对话框显示状态
      open: false,
      // 加载状态
      loading: false,
      // 申请详情
      application: null
    };
  },
  methods: {
    /** 打开对话框 */
    openDialog(applicationId) {
      this.open = true;
      this.loading = true;
      this.application = null;
      
      // 加载申请详情
      getApplicationDetail(applicationId).then(response => {
        this.application = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    
    /** 录取 */
    handleAccept() {
      this.$emit('accept', this.application);
      this.open = false;
    },
    
    /** 拒绝 */
    handleReject() {
      this.$emit('reject', this.application);
      this.open = false;
    },
    
    /** 解析技术栈 */
    parseTechStack(techStack) {
      if (!techStack) return [];
      try {
        return JSON.parse(techStack);
      } catch (e) {
        return [];
      }
    },
    
    /** 绩点标签类型 */
    getGpaType(gpa) {
      if (!gpa) return 'info';
      if (gpa >= 3.5) return 'success';
      if (gpa >= 3.0) return '';
      if (gpa >= 2.5) return 'warning';
      return 'danger';
    },
    
    /** 状态标签类型 */
    getStatusType(status) {
      const map = {
        '待审核': 'warning',
        '已录取': 'success',
        '已拒绝': 'danger',
        '已取消': 'info',
        '已失效': 'info'
      };
      return map[status] || 'info';
    }
  }
};
</script>

<style scoped lang="scss">
.detail-card {
  margin-bottom: 20px;
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.student-name {
  font-size: 15px;
  font-weight: bold;
  color: #409EFF;
}

.email-text {
  color: #409EFF;
  
  i {
    margin-right: 5px;
  }
}

.intro-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
}

.apply-reason-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

::v-deep .el-descriptions-item__label {
  width: 120px;
  font-weight: bold;
}
</style>